<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="age+=100">vm:{{age}}</button>
    <child :age="age"></child>
</div>
</body>
<script>
    // 1- 当自身的数据状态发生更改
    // 2- 当父组件传递过来的属性发生变化
	new Vue({
		el: "#root",
        data:{
			age:200
        },
        components:{
			Child:{
				data(){
					return {
						count:100,
                        username:"zhangsan"
					}
				},
                props:["age"],
				template:(`
                    <button @click="fn">{{count}}|{{username}}|{{age}}</button>
                `),
                methods:{
				    fn(){
						// this.count = 100;
                        this.count++;
						setTimeout(()=>{
							this.username+="!";
                        })

                    }
                },
                beforeUpdate(){
					// 视图更新前
					console.log("1-beforeUpdate",this.count,document.querySelector("button").innerText);
                },
                updated(){
					// 视图更新完毕
					console.log("2- updated",this.count,document.querySelector("button").innerText);
                },
                beforeCreate() {
					console.log("beforeCreate");
				},
                created(){
					console.log("created");
                },
                beforeMount(){
					console.log("beforeMount");
                },
                mounted(){
					console.log("mounted");
                }
			}

        }
	})
</script>
</html>